<template>
  <div class="reg-containet">
    <!-- //注册的盒子 -->
    <div class="reg-box">
      <!-- 注册表单区域 -->
      <div class="btu-box2">
        <div class="title">登录页面</div>
        <el-form label-position="right" ref="ruleFormRef" label-width="70px" status-icon :model="userData" style="max-width: 460px" :rules="rules">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model.trim="userData.userName" />
          </el-form-item>
          <el-form-item label="密码" prop="passWord">
            <el-input type="password" v-model.trim="userData.passWord" />
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <div class="codeDom">
              <el-input v-model.trim="userData.code" />
              <img :src="imgCode" @click="getCodeFn" alt="" class="imgcode" />
            </div>
          </el-form-item>
          <el-form-item>
            <el-button class="btn-login" type="primary" @click="onSubmit(ruleFormRef)">登录</el-button>
            <el-link type="info" :underline="false" @click="goReg">注册</el-link>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, getCurrentInstance, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { login, getCode } from '@/api/index.js'
import { userinfo } from '@/store/index.js'
import { menuListStore } from '@/store/menuList.js'

const userData = reactive({
  userName: 'admin',
  passWord: 'admin',
  code: ''
})

const { proxy } = getCurrentInstance()
let imgCode = ref('')
onMounted(() => {
  getCodeFn()
})
// 获取验证码
const getCodeFn = () => {
  getCode().then(res => {
    if (res.data.status) {
      imgCode.value = 'data:image/png;base64,' + res.data.base64Url
    } else {
      imgCode.value = ''
      proxy.$Message.error('获取验证码失败！')
    }
  })
}
//用户名密码正则，4到16位（字母，数字，下划线，减号）
const uPattern = /^[a-zA-Z0-9_-]{4,16}$/
const validateUserName = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('用户名不能为空！'))
  } else if (!uPattern.test(value)) {
    return callback(new Error('必须为4到16位(字母,数字,下划线,减号!)'))
  } else {
    callback()
  }
}
const validatePassWord = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('密码不能为空！'))
  } else if (!uPattern.test(value)) {
    return callback(new Error('必须为4到16位(字母,数字,下划线,减号!)'))
  } else {
    callback()
  }
}
const codePattern = /^[a-zA-Z0-9]{4}$/
const vaidateCode = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('验证码不能为空！'))
  } else if (!codePattern.test(value)) {
    return callback(new Error('验证码格式错误！'))
  } else {
    callback()
  }
}

const rules = reactive({
  userName: [{ validator: validateUserName, trigger: 'blur' }],
  passWord: [{ validator: validatePassWord, trigger: 'blur' }],
  code: [{ validator: vaidateCode, trigger: 'blur' }]
})
const userinfoStore = userinfo()
const ruleFormRef = ref()
const menuListStoreRes = menuListStore()
// 登录
const onSubmit = ruleFormRef => {
  if (!ruleFormRef) return
  ruleFormRef.validate(valid => {
    if (valid) {
      const { userName, passWord, code } = userData
      login(userName, passWord, code).then(res => {
        if (res.data) {
          const infoData = res.data[0]
          userinfoStore.$patch(state => {
            state.profile = infoData
          })
          menuListStoreRes.queryUserMenuList(userinfoStore.profile.id).then(() => {
            proxy.$Message({
              message: res.msg,
              type: 'success'
            })
            router.push('/page/home/gaode')
          })
        } else {
          proxy.$Message.error(res.msg)
          getCodeFn()
        }
      })
      // .catch(e => {
      //   proxy.$Message.error('服务器错误，请等待！')
      // })
      // 登录接口方法体
    } else {
      return false
    }
  })
}
const router = useRouter()
// 注册
const goReg = () => {
  router.push({
    path: '/register'
  })
}
</script>
<style lang="less" scoped>
.reg-containet {
  background: url('@/assets/img/regist.jpg') center;
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .reg-box {
    width: 400px;
    height: 270px;
    background-color: rgba(0, 0, 0, 0.192);
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;

    .btu-box2 {
      margin: 0 30px;
      /deep/.el-form-item__label {
        color: white;
      }
      /deep/.el-input__wrapper {
        background-color: rgba(0, 0, 0, 0.292) !important;
        box-shadow: transparent;
      }
      /deep/.el-input__inner {
        color: white;
      }
      .btn-login {
        width: 100%;
        // background-color: rgba(0, 0, 0, 0.292) !important;
        // border: transparent;
      }
      .title {
        text-align: center;
        color: white;
        font-size: 24px;
        padding: 15px 0;
      }
      .codeDom {
        display: flex;
        justify-content: space-between;
        align-content: center;
      }
      .imgcode {
        margin-left: 8px;
        width: 100px;
        border-radius: 5px;
      }
    }
  }
}
</style>